<!-- Dom模板 -->
<template>
  <div class="navigation">
    <div class="picture">
      <van-icon name="arrow-left" class="fan" @click="back" />
      <img :src="this.$router.currentRoute.query.goods_url" alt="" />
    </div>
    <div class="introduce">
      <p class="p_1">
        {{ this.$router.currentRoute.query.goods_name }}
      </p>
      <p class="p_2">
        <span>¥ </span><span>{{ this.$router.currentRoute.query.price }}</span
        ><span>限时减价</span>
      </p>
      <p class="p_3">
        ¥{{ this.$router.currentRoute.query.goods_original }}<span></span>
      </p>
      <div class="information">
        <p class="p_4">
          <span>促销</span><span>满减</span><span>满3件打8折</span>
        </p>
        <p class="p_5">
          <span>运费</span
          ><span>¥ {{ this.$router.currentRoute.query.goods_express }}</span>
        </p>
        <p class="p_6">
          <span>物流</span><span>香港发货, 预计15天左右送达</span>
        </p>
        <p class="p_7">
          <span>服务</span>
          <span class="icon iconfont icon-querenwancheng"></span>正品保障
          <span class="icon iconfont icon-querenwancheng"></span>15天保价
        </p>
      </div>
    </div>
    <!-- 底部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        @click="cartMerchandise"
        :icon="staricon"
        :text="startext"
        :color="starcolor"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="cartbadge"
        @click="openCarPage"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addshow"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="goBuyClick" />
    </van-goods-action>
  </div>
</template>
<script>
// import a from './a'; // 引入组件
import * as api from "../../../components/api/shopping_yqq";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      //购物车绑定的数量
      cartbadge: localStorage.getItem("carLength"),
      //勇于改变收藏颜色
      starcolor: "#000",
      //用来判断收藏状态
      starType: false,
      startext: "收藏",
      //用于改变收藏样式
      staricon: "star-o",
      //   商品限购数量,0表示不限购
      quota: 999999,
      itemms:[this.$router.currentRoute.query],
    };
  },

  // 监听属性
  computed: {},
  // 组件挂载的地方
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    console.log(this.$router.currentRoute.query);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$router.currentRoute.query.price);
  },
  // Vue方法定义
  methods: {
    back() {
      this.$router.history.go(-1);
    },
    //   点击加入购物车
    async addshow() {
      let item = this.$router.currentRoute.query;
      let res = await api.addshopping({
        uid: JSON.parse(localStorage.getItem("token")).uid,
        data: item
      });
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        onClose: async () => {
          this.$toast({
            message: "添加购物车成功",
            position: "bottom"
          });
        }
      });
    },
    //   点击收藏
    cartMerchandise() {
      this.starType = !this.starType;
      if (this.starType) {
        this.startext = "已收藏";
        this.starcolor = "red";
        this.staricon = "star";
        this.$toast({
          message: "收藏宝贝成功",
          position: "bottom"
        });
      } else {
        this.startext = "收藏";
        this.starcolor = "#000";
        this.staricon = "star-o";
        this.$toast({
          message: "取消宝贝收藏成功",
          position: "bottom"
        });
      }
    },
    // 点击购物车
    openCarPage() {
      this.$router.push("/shoppings");
    },
    goBuyClick(){
      this.$store.commit('yanqq/getCheckArrAndPrices',{checkArr:this.itemms, prices:this.itemms[0].price})
      setTimeout(() => {
        this.$router.push("/confirmOrder");
      }, 100);
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../components/fonts/iconfont.css");
.navigation {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  z-index: 1;
  left: 0;
  overflow-y: auto;
}
.picture {
  width: 100%;
  height: 372px;
}
.picture img {
  width: 100%;
  height: 100%;
}
.icon-querenwancheng {
  color: red;
}
.introduce {
  width: 100%;
  height: calc(100% - 422px);
  padding: 10px 10px 0 20px;
  overflow-y: auto;
}
.introduce .p_1 {
  width: 100%;
  font-weight: 600;
  padding-right: 30px;
  line-height: 30px;
}
.introduce .p_2 {
  width: 100%;
  line-height: 30px;
  color: red;
}
.p_2 > span:nth-child(1) {
  font-size: 12px;
  font-weight: 600;
}
.p_2 > span:nth-child(2) {
  font-size: 20px;
  font-weight: 600;
}
.p_2 > span:nth-child(3) {
  font-size: 12px;
  border: 1px solid red;
  margin-left: 10px;
  padding: 2px;
}
.p_3 {
  width: 100px;
  color: rgb(170, 169, 169);
  font-size: 12px;
  position: relative;
}
.p_3 span {
  display: block;
  width: 50%;
  height: 1px;
  background: rgb(170, 169, 169);
  position: absolute;
  top: 45%;
}
.information {
  width: 100%;
  height: auto;
  padding-left: 10px;
}
.information p {
  margin-top: 15px;
  font-size: 12px;
}
.information p > span:nth-child(1) {
  margin-right: 15px;
}
.information > p:nth-child(1) > span:nth-child(2) {
  margin-right: 5px;
  color: red;
  font-size: 12px;
  border: 1px solid red;
}
.fan {
  width: 30px;
  height: 30px;
  line-height: 30px;
  position: fixed;
  top: 1%;
  left: 3%;
  font-size: 20px;
  text-align: center;
  background: black;
  border-radius: 50%;
  opacity: 0.7;
  color: white;
}
</style>